<template>
  <div class="scene-box">
    <div ref="container" class="scene-box-body" />
    <div class="scene-box-parts">
      <img src="images/parts-1.png" draggable="false" />
      <img src="images/parts-2.png" draggable="false" />
      <img src="images/parts-3.png" draggable="false" />
      <img src="images/parts-4.png" draggable="false" />
    </div>
  </div>
</template>

<script>
import { DutuJS } from '../../plugin/DutuJS/index'
let map = null // 由于vue的双向绑定机制，不能放进data函数内，否则会导致页面卡顿
export default {
  name: 'Duxiaoxiu',
  mounted () {
    this.init()
  },
  methods: {
    // 初始化
    init () {
      let dom = this.$refs['container'];
      // 初始化配置
      let config = {
        dom, // 加载画布的容器
        addAmbientLight: true, // 加入环境光源
        addSunShine: true, // 加入太阳光源
        openShadow: false, // 不打开阴影
        cameraPosition: { x: 0, y: 0, z: 6 }, // 初始化相机坐标
        ambientLight_strength: 0.5, // 环境光强度
      }
      map = new DutuJS(config)
      // 加载设备模型
      map.addGltf({
        openShadow: false, // 关闭阴影效果
        fileName: 'device', // 在public文件夹下glb文件夹内的模型文件名称
        beforeAdd: (mesh, animations) => {
          mesh.traverse(chi => {
            if (chi.name.indexOf('Camera') === -1) {
              if (chi.name.indexOf('C') === 0) {
                console.log(chi)
                map.getMesh(chi, obj => {
                  if (obj.material) {
                    map.test(obj)
                    // obj.material.opacity = 0
                  }
                })
                const config = {
                  object3d: chi,
                  type: 'copy',
                  // type: 'replace',
                  copyName: 'C',
                  isGlow: true,
                  opacity: 0.1,
                  color: '#0642a7',
                }
                map.toWireframe(config)
              }
            }
          })
          // 加载设备模型自带的帧动画
          map.addAni({
            mesh, // 绑定动画的模型对象
            animations, // 帧动画内容对象数组
            index: 0 // 播放 帧动画内容对象数组 的第一个动画
          })
          return true // 必须返回true才会将模型添加到场景内
        }
      })
      this.render() // 实时渲染
      map.addDecorate() // 加入环境装饰
      map.addDirectionalLight() // 多加一个太阳光源
      map.addBase() // 加入底部的光圈效果
      map.addMesh({ sideLength: 1000, color: 0x194268 })// 由于加入泛光特效，不能设置场景背景，否则会被泛光影响，因此加一个较大的盒子并设置需要的背景色来代替场景背景
      setTimeout(() => {
        map.addBase() // 加入底部的光圈效果
        setTimeout(() => {
          map.addBase() // 加入底部的光圈效果
        }, 2500);
      }, 2500);
    },
    // 实时渲染
    render () {
      // 由泛光特效渲染器代替
      map.glowInit()
      // requestAnimationFrame(this.render)
    }
  }
}
</script>

<style lang="scss" scoped>
.scene-box {
  width: 100%;
  height: 100%;
  position: relative;

  &-body {
    width: 100%;
    height: 100%;
  }

  &-parts {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 7vw;
    display: flex;
    justify-content: space-between;

    img {
      margin-right: 1rem;
      background-color: rgba(255, 255, 255, 0.1);
      padding: 0.5rem 3rem;
    }
  }
}
</style>